<template>
	<view class="main">
		<view class="dashboard-bg-img">
			<image :src="bgUrl" style="width:100%;height:100%;object-fit: fill;" mode="aspectFill"></image>
		</view>
		<view class="logo-bg">
			<image src="../../static/bg/chess2.png" style="width:200rpx;height:200rpx;"></image>
		</view>
		<text class="sub-title">童年时光，真实记忆</text>
		<text class="title">狗卵棋</text>
		<button class="start-btn" @tap="toStart" hover-class="gui-tap">开&nbsp;&nbsp;始</button>
		<button class="exit-btn" @tap="exit" hover-class="gui-tap">退&nbsp;&nbsp;出</button>
		<view class="voice">
			<image src="@/static/images/volume-notice.png" mode="widthFix" v-if="canPlayMusic" style="width:48rpx;"
				@tap="traggle"></image>
			<image src="@/static/images/volume-mute.png" mode="widthFix" v-else style="width:48rpx;" @tap="traggle">
			</image>
		</view>
		<view>
			<view v-for="item of 20" :key="item" class="leafflake"></view>
		</view>
	</view>
</template>

<script>
	import {
		ref,
		onUnmounted
	} from 'vue'
	import {
		onUnload,
		onHide,
		onShow,
		onReady
	} from '@dcloudio/uni-app'
	export default {
		setup() {

			const canPlayMusic = ref(false);
			const audio = ref(null)
			const traggle = () => {
				canPlayMusic.value = !canPlayMusic.value;
				if (canPlayMusic.value) {
					audio.value.play()
				} else {
					audio.value.stop();
				}
			}

			onShow(() => {
				if (audio.value) {
					console.log("onshow 存在")
					audio.value.play()
				} else {
					console.log("onshow 不存在，创建")
					audio.value = uni.$hl.createHlAudio('stepping', true, false)
				}
			})
			onHide(() => {
				canPlayMusic.value = false
				if (audio.value) {
					audio.value.stop()
				}
			})

			const randomNumber = () => {
				return Math.floor(Math.random() * (4 - 1 + 1)) + 1;
			}
			const randomBgNumber = () => {
				return Math.floor(Math.random() * (2 - 1 + 1)) + 1;
			}
			let num = randomNumber()

			const bgUrl = ref("")
			bgUrl.value = `../../static/images/bg0${randomBgNumber()}.png`
			const toStart = () => {
				let ctx = uni.$hl.createHlAudio("menu", false, false)
				ctx.play()
				setTimeout(() => {
					ctx.stop()
					uni.navigateTo({
						url: "/subpages/task/index"
					})
				}, 1000)
			}

			const exit = () => {
				if (audio.value) {
					audio.value.stop()
				}
				uni.clearStorageSync()
				uni.reLaunch({
					url: `/subpages/user/login`
				})
			}

			return {
				canPlayMusic,
				toStart,
				traggle,
				bgUrl,
				exit,
			}
		}
	}
</script>

<style lang="scss" scoped>
	.main {
		width: 100vw;
		height: 100vh;
		flex-direction: column;
		display: flex;
		justify-content: center;
		align-items: center;
		box-sizing: border-box;
		position: relative;
		overflow: hidden;

		.logo-bg {
			position: absolute;
			top:280rpx;
		}

		.voice {
			position: absolute;
			right: 50rpx;
			top: 30rpx;
		}

		.dashboard-bg-img {
			z-index: -1;
			overflow: hidden;
			position: absolute;
			top: 0;
			left: 0;
			width: 100vw;
			height: 100vh;
		}

		.play-rule {
			position: absolute;
			left: 50rpx;
			top: 30rpx;

			.play-rule-title {
				text-align: center;
				font-size: 32rpx;
				font-weight: 800;
				color: #422517;
			}

			.play-rule-info {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: flex-start;

				.play-rule-txt {
					font-size: 24rpx;
					color: black;
				}
			}
		}

		.title {
			font-size: 88rpx;
			font-weight: bold;
			color: #b81a35;
		}

		.sub-title {
			color: #5a4b3b;
		}

		.start-btn {
			display: flex;
			justify-content: center;
			align-items: center;
			text-align: center;
			margin-top: 20px;
			width: 150px;
			height: 56px;
			line-height: 56px;
			color: white;
			font-weight: bolder;
			border-radius: 56rpx;
			box-sizing: border-box;

			font-size: larger;
			background: #422517;
			-webkit-box-shadow: 0px 0px 5px 7px rgba(204, 204, 204, 1);
			-moz-box-shadow: 0px 0px 5px 7px rgba(204, 204, 204, 1);
			box-shadow: 0px 0px 5px 7px rgba(204, 204, 204, 1), -6px 6px 8px inset rgba(255, 255, 255, 0.6),
				6px -6px 8px inset rgba(0, 0, 0, 0.2);

			&::after {
				border: none;
			}
		}

		.exit-btn {
			display: flex;
			justify-content: center;
			text-align: center;
			margin-top: 20px;
			width: 150px;
			height: 56px;
			line-height: 56px;
			border-radius: 56rpx;
			color: white;
			font-weight: bolder;
			box-sizing: border-box;

			font-size: larger;
			background: #c300fe;
			-webkit-box-shadow: 0px 0px 5px 7px rgba(204, 204, 204, 1);
			-moz-box-shadow: 0px 0px 5px 7px rgba(204, 204, 204, 1);
			box-shadow: 0px 0px 5px 7px rgba(204, 204, 204, 1), -6px 6px 8px inset rgba(255, 255, 255, 0.6),
				6px -6px 8px inset rgba(0, 0, 0, 0.2);

			&::after {
				border: none;
			}
		}

		.start-hover {
			scale: 1.03;
		}

		.leafflake {
			--size: 3vw;
			width: var(--size);
			height: var(--size);
			position: absolute;
			top: -5vh;
			background-image: linear-gradient(135deg,
					rgb(126, 224, 165),
					rgb(0, 130, 39));
			border-radius: var(--radius);
		}

		@keyframes leaffall {
			0% {
				transform: translate3d(var(--left-ini), 0, 0);
			}

			50% {
				// 在水平方向上移动
				transform: translate3d(-var(--left-end), 50vh, 0);
			}

			100% {
				transform: translate3d(var(--left-end), 100vh, 0);
			}
		}

		@for $i from 1 through 30 {
			.leafflake:nth-child(#{$i}) {
				--size: #{random(10) * 0.2 + 1}vw;
				--radius: #{($i%2) * 100}px #{(($i + 1) %2) * 100}px;
				--left-ini: #{random(20) - 10}vw;
				--left-middle:#{random(20)*0.5 -5}vw;
				--left-end: #{random(20) - 10}vw;
				left: #{random(100)}vw;
				animation: leaffall #{5 + random(10)}s linear infinite;
				animation-delay: -#{random(10)}s;
			}
		}

		/* added small blur every 6 leafflakes*/
		.leafflake:nth-child(6n) {
			filter: blur(1px);
		}
	}
</style>